<template>
  <div class="hotmap" v-show="isShow">
    <span>热点半径(radius size):</span>
    <a-slider id="radius" @change="handleRadius" />
    <span>模糊尺寸(blur size):</span>
    <a-slider id="blur" @change="handleBlur" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import vector from '@/js/HotMap.js'
let isShow = ref(false)
const map = defineProps({
  map: Object,
})
// 添加热力图
const addHotMap = () => {
  isShow.value = true
  map.map.addLayer(vector)
}
// 移除热力图
const delHotMap = () => {
  isShow.value = false
  map.map.getLayers().array_.splice(3, 1)
  map.map.render()
}
// 分别为另个参数设置控件（input）添加事件监听，动态设置热点图的参数
function handleRadius(value) {
  //设置热点图层的热点半径
  vector.setRadius(parseInt(value, 10))
}
function handleBlur(value) {
  vector.setBlur(parseInt(value, 10))
}
defineExpose({ addHotMap, delHotMap })
</script>
<style scoped>
.code-box-demo .ant-slider {
  margin-bottom: 16px;
}
.hotmap {
  position: fixed;
  top: 55px;
  width: 200px;
  padding: 10px;
  z-index: 100;
  left: 50%;
  transform: translateX(-50%);
  background: white;
}
</style>
